/**
 * @function
 * @name collapse
 * @description Collapse for easy toggle behavior.
 * @memberof HQ.components
 *
 * @param {object} enhancementRoot - The current DOM element.
 */
HQ.components.collapse = function (enhancementRoot) {

    $(this.elems).each(function () {

        // GLOBAL VARS
        // ==============================================================
        var $inst             = $(this); // .my-collapse
        var collapseSelected  = $inst.data('collapse-selected');
        var $collapseBtns     = $('.js-collapse-btn', $inst);
        var $collapseSections = $('.js-collapse-pane', $inst);
        var isAccordion       = true;
        var scrollSpacing     = -10;

        // Update the hash property of the current page
        var updateHash        = $inst.data('collapse-update-hash') ? $inst.data('collapse-update-hash') : false;

        // Prevent hashchange process when user click on tab buttons.
        var clickProcess      = false;

        // Device Name
        var device = {
            mobile   : "mobile",
            notMobile: "notmobile"
        };
        var currentDevice = device.notMobile;

        // HASH TAG: The hash tag has priority over the tabSelected.
        // To prevent browser anchor jump behavior we will add 'Panel' after de result.
        var hash = window.location.hash;

        // CONDITIONS
        // ==============================================================
        if ($inst.hasClass('all-open') || $inst.data('collapse-allopen')) {
            isAccordion = false
        }

        // FUNCTIONS
        // ==============================================================

        /**
         * @function
         * @name _collapseScrollTo
         * @description Scroll to above the collapse.
         * @memberof HQ.components.collapse
         * @param {object} p_item The collapse to scroll to.
         * @private
         */
        function _collapseScrollTo(p_item) {
            var position = Math.round(p_item.offset().top + scrollSpacing);
            window.scrollTo(0, position);
        }

        /**
         * @function
         * @name _deepLinking
         * @description Select the right collapse section trigger by the hash in the url.
         * @memberof HQ.components.collapse
         * @private
         */
        function _deepLinking(p_hash, p_scroll) {
            $.each($collapseSections, function () {
                var $this = $(this);
                var $btn  = $this.prev();
                var id    = $this.attr('id');

                if ('#'+id === p_hash) {
                    $('a', $btn).trigger("open");

                    if (p_scroll) {
                        _collapseScrollTo($inst);
                    }
                }
            });
        }

        /**
         * @function
         * @name _collapseSelected
         * @description Select/Show the current collapse section.
         * @memberof HQ.components.collapse
         *
         * @param {integer} p_item Collapse section to show.
         * @private
         */
        function _collapseSelected(p_item) {
            var $btnSelected = $($collapseBtns[p_item - 1]);

            if ($btnSelected.length > 0) {
                $('a', $btnSelected).trigger("open");
            }
        }

        // EVENTS
        // ==============================================================

        // Mobile optimization:
        // We will not use the collapse slide animation
        // to increase better rendering.
        $inst.collapse({
            accordion: isAccordion,
            open: function () {
                var $this = this;
                if(currentDevice === device.mobile){
                    $this.show();
                } else {
                    $this.slideDown(400);
                }
            },
            close: function () {
                var $this = this;
                if(currentDevice === device.mobile){
                    $this.hide();
                } else {
                    $this.slideUp(400);
                }
            }
        });

        // Update the hash when a collapsible section is opened.
        $inst.bind("opened", function (e, section) {
            e.preventDefault();
            var $btn     = $(section.$summary);
            var $content = $(section.$details);
            var id       = '#' + $content.attr('id').replace('Panel', '');

            clickProcess = true;

            // Set hash
            if(updateHash){ window.location.hash = id; }

            if(currentDevice === device.mobile){
                _collapseScrollTo($btn);
            }
            return false;
        });

        // In page load, selected the collapse section to show.
        if (updateHash && hash.length > 0) {
            _deepLinking(hash + 'Panel');

        } else if (typeof(collapseSelected) !== "undefined" && collapseSelected) {
            _collapseSelected(collapseSelected);
        }

        // Detect hash change
        $(window).bind('hashchange', function () {
            if(updateHash){
                var hash = window.location.hash + 'Panel';
                
                if (!clickProcess) {
                    _deepLinking(hash, true);
                }
                clickProcess = false;
            }
        });

        // EXTERNAL API
        // ==============================================================

        $inst.on('collapseSelected.COLLAPSE', function (e, p_currentSelectedItem) {
            _collapseSelected(p_currentSelectedItem);
        });

        $inst.on('updateHash.COLLAPSE', function (e, p_updateHash) {
            updateHash = p_updateHash;
        });

        // MEDIAS QUERIES
        // ==============================================================
        var _enquireMobileHandler = {
            match: function () {
                currentDevice = device.mobile;
            }
        };
        enquire.register(HQ.mediaqueries.MOBILE, _enquireMobileHandler);

        var _enquireNotMobileHandler = {
            match: function () {
                currentDevice = device.notMobile;
            }
        };
        enquire.register(HQ.mediaqueries.NOT_MOBILE, _enquireNotMobileHandler, true);

    });
};